
<template>
    <div class="footer" v-if="showfooter">

        <a class="footer-item" @click="go('/',1)">
            <i class="mi-icon" :class="{'mi-icon-home':footerNav!==1,'mi-icon-home-selected':footerNav===1}"></i>
            <span class="title">首页</span>
        </a>
        <a class="footer-item" @click="go('/category',2)">
            <i class="mi-icon" :class="{'mi-icon-category':footerNav!==2,'mi-icon-category-selected':footerNav===2}"></i>
            <span  class="title">分类</span>
        </a>
        <a class="footer-item">
            <i class="mi-icon mi-icon-planet"></i>
            <span  class="title">星球</span>
        </a>
        <a class="footer-item">
            <i class="mi-icon mi-icon-car"></i>
            <span  class="title">购物车</span>
        </a>
        <a class="footer-item" @click="go('/user',5)">
            <i class="mi-icon mi-icon-my" :class="{'mi-icon-user':footerNav!==5,'mi-icon-user-selected':footerNav===5}"></i>
            <span  class="title">我的</span>
        </a>
       
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
    name: 'Footer',
    computed:{
        ...mapState(['footerNav','showfooter'])
    },
    methods:{
        go(target,index) {
            this.$router.push(target);
            this.switchFooterNav(index);
        },
        ...mapMutations(['switchFooterNav'])
    }
}
</script>

<style lang="stylus">
.footer
    position fixed;
    width: 100%;
    height 52px;
    left 0;
    bottom 0;
    z-index 2;
    background #fff;
    font-size 12.65px;
    display flex;
    justify-content space-between;
    align-items center;
    .footer-item
        flex:1 1 auto;
        color #999;
        .title
            display inline-block;
            margin-top 5px;
        .mi-icon
            display block;
            margin auto;
            width 23px;
            height 23px;
            background-color: transparent;
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: cover;
        .mi-icon-home
            background-image url(https://m.mi.com/static/img/icon-home.c1947eda40.png);
        .mi-icon-home-selected
            background-image url(https://m.mi.com/static/img/icon-home-selected.598ca2c8f9.png);
        .mi-icon-category
            background-image url(https://m.mi.com/static/img/icon-category.be93273636.png);
        .mi-icon-category-selected
            background-image url(https://m.mi.com/static/img/icon-category-selected.252b82a2d7.png);
        .mi-icon-planet
            background-image url(https://m.mi.com/static/img/icon-star.d051789804.png);
        .mi-icon-car
            background-image url(https://m.mi.com/static/img/icon-cart.585c3aa4d3.png);
        .mi-icon-user
            background-image url(https://m.mi.com/static/img/icon-user.23496a0116.png)
        .mi-icon-user-selected
            background-image url(https://m.mi.com/static/img/icon-user-selected.fceea5d907.png)
</style>